import type { Props } from './types'
import type { NvFormItemOption, NvFormOption } from '@/form/types'
import { computed } from 'vue'

const DEFAULT_SEARCH_SPAN = '24 440:12 600:8 880:6 1300:5 1500:4'

export function useSearchOption(
  props: Props,
) {
  const originalSearchOption = computed(() => {
    const _searchForm = props.option.searchForm
    return typeof _searchForm === 'object' ? _searchForm : {}
  })

  const searchOption = computed<NvFormOption>(() => {
    const { fields, searchForm } = props.option
    if (searchForm === false) {
      return { fields: {} }
    }

    const fieldsEntries: [string, NvFormItemOption][] = Object.entries(fields)
      .filter(([_, fieldOption]) => fieldOption.search)
      .map(([field, fieldOption]) => {
        // type不一致，则只继承标题
        if (typeof fieldOption.search === 'object'
          && fieldOption.search.type
          && fieldOption.search.type !== fieldOption.type
        ) {
          return [
            field,
            {
              label: fieldOption.label || fieldOption.title,
              span: DEFAULT_SEARCH_SPAN,
              ...fieldOption.search,
            },
          ]
        }
        // 若搜索的type与表单字段的type一致，则继承表单字段的大部分属性
        else {
          const _fieldOption: NvFormItemOption = {
            type: fieldOption.type,
            label: fieldOption.label || fieldOption.title,
            span: DEFAULT_SEARCH_SPAN,
            placeholder: fieldOption.placeholder,
            clearable: fieldOption.clearable,
            dict: fieldOption.dict,
          }
          if (typeof fieldOption.search === 'object') {
            Object.assign(_fieldOption, {
              ...fieldOption.search,
              props: { ...fieldOption.props, ...fieldOption.search.props },
              slots: { ...fieldOption.slots, ...fieldOption.search.slots },
            })
          }
          else {
            Object.assign(_fieldOption, {
              props: fieldOption.props,
              slots: fieldOption.slots,
            })
          }
          return [field, _fieldOption]
        }
      })

    const { labelPlacement, actions } = originalSearchOption.value

    if (actions !== false) {
      const actionOption: NvFormItemOption = {
        span: DEFAULT_SEARCH_SPAN,
        showLabel: labelPlacement !== 'left',
        suffix: true,
      }
      if (typeof actions === 'object') {
        if (actions?.teleportTo) {
          actionOption.span = 0
        }
        else {
          actionOption.span = actions.span ?? DEFAULT_SEARCH_SPAN
        }
      }
      fieldsEntries.push(['nv_search_actions', actionOption])
    }

    return {
      feedbackStyle: `--n-feedback-height: 0px`,
      showRequireMark: props.option.showRequireMark,
      requireMarkPlacement: props.option.requireMarkPlacement,
      showFeedback: props.option.showFeedback,
      first: props.option.first,
      size: props.size,
      ...originalSearchOption.value,
      formActions: false,
      fields: Object.fromEntries(fieldsEntries),
    }
  })

  return { originalSearchOption, searchOption }
}
